<template>
    <div class="warpper-box">
      <div class="inner_box">
       <form-create 
       v-model="params.fApi" 
       :rule="params.rule" 
       :option="params.option" 
       @btn-search-click="loadList(true)" 
       @btn-deliver-batch-click="deliverBatch" 
       @btn-reset-click="reset"/>
      <deliver-list
       :key="keys"
       :tableData="tables.tableData" 
       :tableLabel="tables.tableLabel" 
       :models="tables" 
       @on-search-click="loadList"
       @on-sendDeliver-click="sendDeliver"
       @on-selection-click="selectionClick"
       />
       <el-dialog :title="form.title" :visible.sync="form.visible" :width="form.width" :close-on-click-modal="false">
        <form-create 
        v-model="form.fApi" 
        :rule="form.rule" 
        :option="form.option" />
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="form.visible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="onFormSubmit">保存</el-button>
        </div>
      </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import { PARAMS_DELIVER,FORM_DELIVER_SUPPLIER,LABEL_DELIVER,OPTION_BLOCK,OPTION_INLINE} from "./deliverModel/deliver_form"
  import deliverList from "./deliverModel/deliver_model_list"
  import {getDeliverList,saveDeliver,saveDeliverBatch,} from "@/api/deliver_api"
  export default {
    components:{
        deliverList
    },
    data() {
      return {
        keys:0,
        params:{
          fApi:{},
          rule:PARAMS_DELIVER,
          option:OPTION_INLINE
        },
        tables:{
          total:0,
          hackReset:true,
          width:'150',
          tableData:[],
          tableLabel: LABEL_DELIVER
        },
        form:{
          id:'',
          type:true,//是否单个还是多个发货  调用不同接口
          title:'发货',
          width:"600px",
          visible:false,
          fApi:{},
          rule:[],
          option:OPTION_BLOCK
        },
        page:{
          pageNum:1,
          pageSize:10,
        },
        selectionItem:[]
      };
    },
    mounted() {
      this.loadList(true);
      this.$nextTick(()=>{
        this.params.fApi.setValue({"unitName":"","goodsName":""});
      })
    },
    methods: {
      async loadList(formData) {
        let params = {};
        let query = this.params.fApi.bind();
        params.unitName = query.unitName;
        params.goodsName = query.goodsName;
        if(formData !== undefined && formData.type === 'page'){
          this.page.pageNum = formData.pageNum;
          this.page.pageSize = formData.pageSize;
        }
        if(formData===true){
          this.page.pageNum = 1;
          this.keys++;
        }
        params.pageNum = this.page.pageNum;
        params.pageSize = this.page.pageSize;
        let btn = this.$store.getters.permission_btns;
        if(btn.includes('batchDeliver')){
          this.params.fApi.hidden(false,'batchDeliver')
        }else{
          this.params.fApi.hidden(true,'batchDeliver')
        }
        const req = await getDeliverList(params);
        if(req.code === 200){
          this.tables.tableData = req.data.list;
          this.tables.tableData.forEach(v=>{
            v.sendDeliver = btn.includes('sendDeliver');// 发货
          })
          this.tables.total = req.data.total;
        }
      },
      //单个发货
      sendDeliver(row){
        this.form.rule = FORM_DELIVER_SUPPLIER;
        this.$nextTick(()=>{
            this.form.id = row.id;
            this.form.fApi.setValue({"remarks":"","name":row.name,"goodsName":row.goodsName,"unitName":row.unitName});
        })
        this.form.type = true;//单个发货
        this.form.visible = true;
      },
      //批量发货
      selectionClick(item){
        this.selectionItem = item;
      },
      deliverBatch(){
        if(this.selectionItem.length === 0){
          return this.$message.error('请勾选数据');
        }
        this.form.rule = FORM_DELIVER_SUPPLIER;
        this.$nextTick(()=>{
            this.form.id = this.selectionItem.map(v=>v.id);
            let name = this.selectionItem.map(v=>v.name);
            let goodsName = this.selectionItem.map(v=>v.goodsName);
            let unitName = this.selectionItem.map(v=>v.unitName);
            this.form.fApi.setValue({"remarks":"","name":name.join(','),"goodsName":goodsName.join(','),"unitName":unitName.join(',')});
        })
        this.form.type = false;//多个发货
        this.form.visible = true;
      },
      async onFormSubmit(formData) {
        this.form.fApi.submit(async (formData, $f) => {
          try {
            let params = {};
            let arr = [];
            if(this.form.type){
              params.id = this.form.id;
              params.remarks = formData.remarks;
            }else{
              this.form.id.forEach(item=>{
                let caes = {};
                caes.id = item;
                caes.remarks = formData.remarks;
                arr.push(caes)
              })
            }
           
            const { code } = this.form.type ? await saveDeliver(params) : await saveDeliverBatch(arr);
            if(code === 200){
              this.$message.success('操作成功');
              this.form.visible = false;
              this.loadList(true);
            }
          } catch (error) {
            //this.$message.info(JSON.stringify(error));
          }
        })
      },
      reset(){
        this.params.fApi.resetFields();
        this.loadList(true);
      }
    }
  };
  </script>